<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
		    *{
		        margin: 0px;
		        padding: 0px;
		    }
		    .box{
		        
		        width: 150px;
		        height: 400px;
		    margin: 40px  auto;
		    }
		    .box ul{
		        background-color: red;
		        width: 150px;
		       
		    }
		    .box   ul ul{
		        background-color: aqua;
		    }
		    .box ul  li{
		        height: 30px;
		        line-height: 30px;
		        text-align: center;
		        color: white;
		        list-style: none;
		    }
		#d2{
		    display: none;
		}
		ul  ul li:hover{
		    background-color:gray;
		}
		#u1  li:hover{
		    color:white;
		    background-color: red;
		}
		
		
		</style>
		<body>
		    <div  class="box">
		    <ul   id="u1">
		        <li>我的淘宝</li>
		        <ul  id="d2">
		            <li>以买到的宝贝</li>
		            <li>我的足迹</li>
		  </ul>
		
		  </ul>
		
		</div>
		<script>
		    
		    
		    u1.onmouseover=function(){
		      
		        d2.style.display="block";
		       
		    }
		    u1.onmouseout=function(){
		        d2.style.display="none";
		    }
		    
		
		
		
		
		
		
		
		</script>
		    
	</body>
</html>
